import styled from 'styled-components';
import { TSelectProps } from './Select.types';
import {
  DIMENSION,
  DEFAULT_DIMENSION,
  ICON_DIMENSION,
  DEFAULT_ICON_DIMENSION,
  FONT_DIMENSION,
  DEFAULT_FONT_DIMENSION,
  INPUT_COLORS
} from '../common/SelectTextfieldTextareaConstants';
import doubleArrow from '../../../images/icon.svg';
import { hexToRgba } from '../common/functions';

/**
 * Стилизованный выпадающий список для использования в компоненте Input.
 * @param {IStyledSelectProps} props - Свойства компонента.
 * @param {string} props.dimension - Размер компонента.
 * @returns {React.Element} - Элемент стилизованного выпадающего списка.
 */
export const StyledSelect = styled.select<TSelectProps>`
  border-style: solid;
  border-radius: 0.3125rem;
  appearance: none;
  cursor: pointer;
  width: ${props =>
    DIMENSION[props.dimension]?.width || DEFAULT_DIMENSION.width};
  height: ${props =>
    DIMENSION[props.dimension]?.height || DEFAULT_DIMENSION.height};

  background-position: 98% center;
  background-image: url(${doubleArrow});
  background-size: ${props =>
    `
            ${
              ICON_DIMENSION[props.dimension]?.width ||
              DEFAULT_ICON_DIMENSION.width
            }
            ${
              DIMENSION[props.dimension]?.height ||
              DEFAULT_ICON_DIMENSION.height
            }
        `};
  background-repeat: no-repeat;
  padding-left: 0.75rem;
  font-size: ${props =>
    FONT_DIMENSION[props.dimension]?.fontSize ||
    DEFAULT_FONT_DIMENSION.fontSize};

  &:focus {
    border-color: ${INPUT_COLORS.focus};
    outline: none;
    box-shadow: 0 0 3px 2px ${hexToRgba(INPUT_COLORS.focus, 0.5)};
  }
`;

/**
 * Элемент опций выпадающего списка.
 */
export const StyledOption = styled.option`
  
`;
